<template>
	<view>
		<form @submit="editPwd" report-submit='true'>
			<view class="ChangePassword">
				<view class="list">
					<!-- 卡类型 -->
					<view class="item">
						<picker class="item-picker" @change="bindPickerChange" :value="index" :range="array" range-key="name" >
							<input placeholder="请选择卡类型" type="text" readonly disabled v-model="classify" />
							<view class='iconfont icon-jiantou'></view>
						</picker>
					</view>
					<!-- 银行卡号 -->
					<view class="item">
						<input type='number' placeholder='请输入银行卡号' placeholder-class='placeholder' v-model="card"></input>
					</view>
					<!-- 证件类型 -->
					<view class="item">
						<picker class="item-picker" @change="certificateType" :value="IDType" :range="certificate" range-key="name" >
							<input placeholder="请选择证件类型" type="text" readonly disabled v-model="IDclassify" />
							<view class='iconfont icon-jiantou'></view>
						</picker>
					</view>
					<!-- 证件号 -->
					<view class="item">
						<input type='text' placeholder='请输入证件号' placeholder-class='placeholder' v-model="IDnumber"></input>
					</view>
					<!-- 户名 -->
					<view class="item">
						<input type='text' placeholder='请输入户名' placeholder-class='placeholder' v-model="username"></input>
					</view>
					<!-- 开户电话 -->
					<view class="item">
						<input type='number' placeholder='请输入开户电话' placeholder-class='placeholder' v-model="phone"></input>
					</view>
					
					<!-- 有效期 信用卡不能为空 -->
					<view class="item">
						<picker  class="item-picker" mode="date" placeholder="请选择" fields="month"  :start="startDate" :end="endDate" @change="bindDateChange">
							<input type='number' placeholder='请选择到期日期' placeholder-class='placeholder' v-model="date" ></input>
							<!-- <view class="uni-input">{{date}}</view> -->
							<view class='iconfont icon-jiantou'></view>
						</picker>
						
					</view>
					<!-- 信用卡cvv2 -->
					<view class="item">
						<input type='number' placeholder='请输入cvv2' placeholder-class='placeholder' v-model="credit"></input>
					</view>
					<!-- 验证码 -->
					<view class="item">
						<view class="item acea-row row-between-wrapper">
							<input type='number' placeholder='填写验证码' placeholder-class='placeholder' class="codeIput" v-model="captcha"></input>
							<button class="code font-color"  @click="code">
								{{ isRun ? `${runTime}s后重新获取` : `${ text }` }}
							</button>
						</view>
					</view>
				</view>
				<button form-type="submit" class="confirmBnt bg-color">确认绑定</button>
			</view>
		</form>
	</view>
</template>

<script>
	// 引入申请签约接口 postContract， 引入确认签约接口 postAffirm
	import { postContract , postAffirm } from '../../../api/store.js'
	export default {
		data() {
			return {
				classify:"",//显示卡类型名称
				index:"",//传递卡类型的参树
				array:[
					{
						type: "00",
						name: "借记卡"
					},
					{
						type: "02",
						name: "准贷记卡/贷记卡"
					}
				],
				// 证件类型
				IDType:"", // 传递证件类型的参数
				IDclassify:"", // 显示的证件类型名称
				// 证件类型
				certificate:[
					{
						type:'0',
						name:"身份证"
					}
				],
				card:"", // 银行卡号
				IDnumber:"", // 证件号码
				username:"", // 户名
				phone:"", // 开户电话
				credit:"", //信用卡后三位
				captcha:"", // 验证码
				text:"获取验证码",
				date:'', // 银行卡到期日期
				thpinfo:"", // 签约成功后返回的数据
				isRun: false,
				runTime: 60 // 验证码倒计时
			};
		},
		 computed: {
				startDate() {
						return this.getDate('start');
				},
				endDate() {
						return this.getDate('end');
				}
		},
		methods: {
			// 当点击确认绑卡的时候执行的函数
			editPwd:function(){	
				let that =this
				// 调用格式验证
				if(that.index =='') return that.$util.Tips({
						title: "请选择卡类型"
				});
				if(that.card =='') return that.$util.Tips({
						title: "请输入银行卡号"
				});
				if(that.IDType =='') return that.$util.Tips({
						title: "请选择证件类型"
				});
				if(that.IDnumber =='') return that.$util.Tips({
						title: "请输入证件号码"
				});
				if(that.username =='') return that.$util.Tips({
						title: "请输入用户名"
				});
				if(that.phone =='') return that.$util.Tips({
						title: "请输入开户电话"
				});
				// 如果卡类型选的是准贷记卡/贷记卡，则信用卡到期时间和信用卡后三位是必填项
				console.log("银行卡类型")
				console.log(that.index =='00')
				console.log("银行卡类型")
				if(that.index =='02'){
					// 当用户选择卡类型是准贷记卡/贷记卡时，信用卡和信用卡有效期是必填
					console.log("信用卡")
					if(that.date =='') return that.$util.Tips({
							title: "请输入到期时间"
					});
					if(that.credit =='') return that.$util.Tips({
							title: "请输入信用卡后三位"
					});
				};
				// 当所有费控验证完成后，验证身份证，银行卡和信用卡的卡号
				// 用正则验证银行卡号
				
				// 用正则验证身份证号
				if (!/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)/.test(that.IDnumber)) return that.$util.Tips({title:"请输入正确的证件号"})
				 // 用正则验证正确的手机号
				if (!/^1[3-9]\d{9}$/.test(this.phone)) return that.$util.Tips({title:"请输入正确的手机号"})
				
				// 按钮再加个验证码的非空验证
				if(that.captcha =='') return that.$util.Tips({
						title: "请输入验证码"
					});
				// 非空和格式验证完之后，获取需要传递后台的对象
				let obj = {
					accttype: that.index, // 卡类型
					acctno: that.card, // 银行卡号
					idtype: that.IDType, // 证件类型
					idno: that.IDnumber, // 证件号码
					acctname: that.username, // 用户名
					mobile: that.phone, // 开户电话
					validdate: that.date,  // 信用卡到期时间
					cvv2: that.credit, // 信用卡后三位
					thpinfo: that.thpinfo, // 申请签约返回的数据
					smscode: that.captcha // 验证码
				}
				console.log(obj)
				postAffirm(obj)
				.then(res=>{
					// 请求成功后的处理逻辑
					console.log(res)
					that.$util.Tips({
						title: res.data.message
					});
					uni.showModal({
					    title: '提示',
					    content: '绑卡成功',
							showCancel: false,
					    success: function (res) {
								if (res.confirm) {
										uni.navigateBack({
												delta: 1
										});
								}
					    }
					});
				})
				.catch(err=>{
					// 请求失败之后的处理逻辑
					that.$util.Tips({
						title: err
					});
				})
			},
			
			/**
			 * 发送验证码
			 * 
			 */
			async code() {
				let that = this
				// 调用格式验证
				 if (this.isRun) return;
				
				if(that.index =='') return that.$util.Tips({
						title: "请选择卡类型"
					});
				if(that.card =='') return that.$util.Tips({
						title: "请输入银行卡号"
					});
					if(that.IDType =='') return that.$util.Tips({
							title: "请选择证件类型"
					});
					if(that.IDnumber =='') return that.$util.Tips({
							title: "请输入证件号码"
					});
					if(that.username =='') return that.$util.Tips({
							title: "请输入用户名"
					});
					if(that.phone =='') return that.$util.Tips({
							title: "请输入开户电话"
					});
					console.log("银行卡类型")
					console.log(that.index =='00')
					console.log("银行卡类型")
					// 如果卡类型选的是准贷记卡/贷记卡，则信用卡到期时间和信用卡后三位是必填项
					if(that.index == '02'){
						// 当用户选择卡类型是准贷记卡/贷记卡时，信用卡和信用卡有效期是必填
						console.log("信用卡")
						if(that.date =='') return that.$util.Tips({
								title: "请输入到期时间"
						});
						if(that.credit =='') return that.$util.Tips({
								title: "请输入信用卡后三位"
						});
					};
				// 当所有费控验证完成后，验证身份证，银行卡和信用卡的卡号
				// 用正则验证银行卡号
				
				// 用正则验证身份证号
				if (!/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)/.test(that.IDnumber)) return that.$util.Tips({title:"请输入正确的证件号"})
				 // 用正则验证正确的手机号
				if (!/^1[3-9]\d{9}$/.test(this.phone)) return that.$util.Tips({title:"请输入正确的手机号"})
				
				// 非空和格式都验证完之后，开始调接口，向后台传递参数
				let obj = {
					accttype: that.index, // 卡类型
					acctno: that.card, // 银行卡号
					idtype: that.IDType, // 证件类型
					idno: that.IDnumber, // 证件号码
					acctname: that.username, // 用户名
					mobile: that.phone, // 开户电话
					validdate: that.date,  // 信用卡到期时间
					cvv2: that.credit // 信用卡后三位
				}
				console.log(obj)
				postContract(obj)
				.then(res=>{
					// 请求成功后的处理逻辑
					console.log(res)
					 that.$util.Tips({title:"短信发送成功"})
					that.thpinfo = res.data.thpinfo
				})
				.catch(err => {
					// 请求失败后的处理逻辑
						that.$util.Tips({
							title: err
						});
					});
					that.isRun = true;
					that.autoTimer = setInterval(() => {
						if (that.runTime == 0) {
							that.runTime = 60;
							that.isRun = false;
							clearInterval(that.autoTimer);
							return;
						}
						that.runTime--;
					}, 1000);
				
			},
			// 将页面上所有的非空验证和格式验证归类到次函数统一调用
			verification:function(){
				let that = this;
				// 非空验证
				if(that.index =='') return that.$util.Tips({
						title: "请选择卡类型"
					});
				if(that.card =='') return that.$util.Tips({
						title: "请输入银行卡号"
					});
					if(that.IDType =='') return that.$util.Tips({
							title: "请选择证件类型"
					});
					if(that.IDnumber =='') return that.$util.Tips({
							title: "请输入证件号码"
					});
					if(that.username =='') return that.$util.Tips({
							title: "请输入用户名"
					});
					if(that.phone =='') return that.$util.Tips({
							title: "请输入开户电话"
					});
					// 如果卡类型选的是准贷记卡/贷记卡，则信用卡到期时间和信用卡后三位是必填项
				// if(!that.index =='00'){
				// 	// 当用户选择卡类型是准贷记卡/贷记卡时，信用卡和信用卡有效期是必填
				// 	console.log("信用卡")
				// 	if(that.date =='') return that.$util.Tips({
				// 			title: "请输入到期时间"
				// 	});
				// 	if(that.credit =='') return that.$util.Tips({
				// 			title: "请输入信用卡后三位"
				// 	});
				// };
				// 当所有费控验证完成后，验证身份证，银行卡和信用卡的卡号
				// 用正则验证银行卡号
				
				// 用正则验证身份证号
				if (!/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)/.test(that.IDnumber)) return that.$util.Tips({title:"请输入正确的证件号"})
				 // 用正则验证正确的手机号
				if (!/^1[3-9]\d{9}$/.test(this.phone)) return that.$util.Tips({title:"请输入正确的手机号"})
			},
			
			// 选择证件类型执行的函数
			certificateType:function(e){
				let than = this
				console.log("执行")
				console.log(e)
				let idx = e.target.value
				than.IDclassify = than.certificate[idx].name
				than.IDType = than.certificate[idx].type
				console.log("type："+than.IDType,"name："+than.IDclassify)
			},
			// 选择卡类型执行的韩式
			bindPickerChange:function(e){
				let than = this
				console.log("执行")
				console.log(e)
				let idx = e.target.value
				than.classify = than.array[idx].name
				than.index = than.array[idx].type
				console.log("type："+than.index,"name："+than.classify)
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				// let day = date.getDate();

				if (type === 'start') {
						year = year - 60;
				} else if (type === 'end') {
						year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				// day = day > 9 ? day : '0' + day;
				return `${year}-${month}`;
			},
			bindDateChange(e){
				let than = this
				// 当日期弹出层点击确定的时候触发的函数，对日期格式的修改,切割返回的时间格式。MMYY
				console.log(e)
				// h
				let date = e.target.value
				console.log(date)
				let split = date.split("-")
				date = split[0].substring(2,4)
				than.date = `${split[1]}${date}`
				console.log(than.date)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff !important;
	}
	
	.ChangePassword .phone {
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		margin-top: 55rpx;
	}
	
	.ChangePassword .list {
		width: 580rpx;
		margin: 53rpx auto 0 auto;
	}
	.ChangePassword .list .item .item-picker{
		position: relative;
		line-height: 100rpx;
	}
	.ChangePassword .list .item .item-picker input {
		width: 100%;
		height: 100rpx;
		font-size: 32rpx;
	}
	.item .item-picker .icon-jiantou{
		position: absolute;
		top: 0;
		right: 0;
	}
	
	.ChangePassword .list .item {
		width: 100%;
		height: 110rpx;
		border-bottom: 2rpx solid #f0f0f0;
	}
	
	.ChangePassword .list .item input {
		width: 100%;
		height: 100%;
		font-size: 32rpx;
	}
	
	.ChangePassword .list .item .placeholder {
		color: #b9b9bc;
	}
	
	.ChangePassword .list .item input.codeIput {
		width: 340rpx;
	}
	
	.ChangePassword .list .item .code {
		font-size: 32rpx;
		background-color: #fff;
	}
	
	.ChangePassword .list .item .code.on {
		color: #b9b9bc !important;
	}
	
	.ChangePassword .confirmBnt {
		font-size: 32rpx;
		width: 580rpx;
		height: 90rpx;
		border-radius: 45rpx;
		color: #fff;
		margin: 92rpx auto 0 auto;
		text-align: center;
		line-height: 90rpx;
	}
</style>
